<template>
	<div>
		<p>KeepAlive使用</p>
		<div>
			当组件在 keep-alive内被切换， 它的 activated 和 deactivated
			这两个生命周期钩子函数将会被对应执行。
		</div>
		<h3>
			include - 字符串或正则表达式。只有名称匹配的组件会被缓存。<br />
			exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。<br />
			max - 数字。最多可以缓存多少组件实例。
		</h3>
		<button @click="ChangeShow">切换组件</button>
		<keep-alive><SonA v-if="isShow" /><SonB v-else /></keep-alive>
	</div>
</template>
<script>
import SonA from "./SonA.vue";
import SonB from "./SonB.vue";
export default {
	name: "",
	components: { SonA, SonB },
	data() {
		return {
			isShow: true,
		};
	},
	mounted() {},
	methods: {
		ChangeShow() {
			this.isShow = !this.isShow;
		},
	},
};
</script>
<style lang="" scoped></style>
